<template>
  <div class="city-list">
    <div class="header clearfix">
      <div class="cancel" @click="cancel">
        <van-icon name="cross" color="#fff" size="22" />
      </div>
      <div class="search-box">
        <van-search
          v-model="value"
          shape="round"
          placeholder="输入城市名或拼音"
        />
      </div>
    </div>
    <div class="current-city">
      当前城市：
      <span class="current-city-name"> 广州 </span>
    </div>

    <CityList :city="city" :hotCities="hotCities" />
  </div>
</template>

<script>
import CityList from "../components/CityList.vue";
import axios from "axios";

export default {
  name: "Citylist",
  data() {
    return {
      value: "",

      city: [],
      hotCities: [],
    };
  },
  components: {
    CityList,
  },
  created() {
  },
  methods: {
    cancel() {
      this.$router.go(-1);
    },
  },

  mounted() {
    axios
      .get("./cities.json")
      .then((res) => {
        // 

        let cityData = res.data;
        // 获取热门城市数据
        this.hotCities = cityData.hot;
        // 

        // 获取城市列表数据
        this.city = cityData.cts;
        // 

        // 按首字母顺序排序
        let citysItem = [];
        let lettArr = [];
        for (let i = 0; i < this.city.length; i++) {
          let letter = this.city[i].py.substring(0, 1).toUpperCase();
          //

          if (lettArr.indexOf(letter) <= -1) {
            lettArr.push(letter);
            //
          }
        }

        lettArr = lettArr.sort();
        //

        for (let i = 0; i < lettArr.length; i++) {
          let tempCityObjArr = [];
          let tempObj = {};
          let letterTemp = lettArr[i];
          //

          tempObj.letter = letterTemp;
          //
          for (let j = 0; j < this.city.length; j++) {
            let letter = this.city[j].py.substring(0, 1).toUpperCase();
            //

            if (letterTemp === letter) {
              tempCityObjArr.push(this.city[j]);
            }
          }

          tempObj.cityList = tempCityObjArr;
          citysItem.push(tempObj);
        }

        this.city = citysItem;
      })
      .catch((err) => {
        
      });
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: #dd403b;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 999;
  .van-icon {
    line-height: 50px;
    padding-left: 12px;
  }
  .search-box {
    flex: 1;
    padding-right: 36px;
    margin-left: 24px;
    .van-search {
      background-color: transparent;
      padding: 0px;
      .van-search__content {
        background-color: #fff;
        .van-cell {
          padding-top: 4px;
        }
      }
    }
  }
}
.current-city {
  // border: 1px solid #000;
  height: 44px;
  margin-top: 50px;
  line-height: 44px;
  padding-left: 12px;
  font-size: 14px;
  color: #a3a3a3;
  .current-city-name {
    font-size: 16px;
    color: #2b2b2b;
  }
}
</style>